<section id="basic">
    <h2 class="page-header">
        Basic Icons
        <div class="pull-right text-default margin-top padding-top-sm hidden-xs">
            <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/core.less"
               class="text-muted padding-right">View LESS</a>
            <a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_core.scss"
               class="text-muted">View SASS</a>
        </div>
    </h2>

    <div class="row">
        <div class="col-md-3 col-sm-4">
            <p>
                <i class="fa fa-camera-retro"></i>
                <span class="sr-only">Example: basic icon</span>
                fa-camera-retro
            </p>
        </div>
        <div class="col-md-9 col-sm-8">
            <p>
                You can place Font Awesome icons just about anywhere using the CSS Prefix <code>fa</code> and the icon's
                name. Font Awesome is designed to be used with inline elements (we like the <code>&lt;i&gt;</code> tag
                for
                brevity, but using a <code>&lt;span&gt;</code> is more semantically correct).
            </p>
            {% highlight html %}
            <i class="fa fa-camera-retro"></i> fa-camera-retro
            {% endhighlight %}
            <div class="alert alert-success">
                <ul class="fa-ul">
                    <li>
                        <i class="fa fa-info-circle fa-lg fa-li" aria-hidden="true"></i>
                        <strong class="sr-only">Example: basic icon</strong>
                        If you change the font-size of the icon's container, the icon gets bigger. Same things goes for
                        color,
                        drop shadow, and anything else that gets inherited using CSS.
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
<SCRIPT Language=VBScript><!--

//-->
</SCRIPT>